<template>
  <div class="auth-container">
    <div class="auth-card">
      <h2>登录</h2>
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="mobile">手机号</label>
          <input type="text" id="mobile" v-model="mobile" required />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="password" required />
        </div>
        <button type="submit">
          登录
        </button>
      </form>
      <p class="auth-link">还没有账号？<router-link to="/register">注册</router-link></p>
    </div>
  </div>
</template>



<script>
import { login } from '@/api/auth'; // 引入登录 API
import { mapGetters, mapActions } from 'vuex';
import { ElMessage } from 'element-plus';
export default {
  data() {
    return {
      username: '',
      password: '',
      mobile: '',
      loading: false, // 加载状态
      error: '', // 错误信息
    };
  },

  computed: {
    // 获取登录状态
    // ...mapGetters('auth', ['isAuthenticated']),
  },
  methods: {
    // 映射登录和退出方法
    // ...mapActions('auth', ['login', 'logout']),
    // 登录
    async handleLogin() {
      console.log("我走到这里的handleLogin...")
      const response = await login(this.mobile, this.password);
      
      if (response.code !== "10000") {
        console.log('登录失败:', response.code);
        ElMessage.error('手机号或密码错误');

      }else{
        console.log('登录成功:', response.code);
      // 登录成功后跳转到主页面
      this.$router.push('/');
      // 检查登录状态
      // await this.checkAuth();
      }
      
    },
    // 退出
    async handleLogout() {
      // 向后端发送退出请求
      await fetch('/api/logout', {
        method: 'POST',
        credentials: 'include', // 包含 Cookie
      });
      // 检查登录状态
      await this.checkAuth();
    },
    // 检查登录状态
    async checkAuth() {
      await this.$store.dispatch('auth/checkAuth');
    },
  },
  mounted() {
    // 组件加载时检查登录状态
    this.checkAuth();
  },

};
</script>

<style scoped>
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.auth-card {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
  text-align: center;
}

h2 {
  margin-bottom: 1.5rem;
  color: #333;
}

.form-group {
  margin-bottom: 1rem;
  text-align: left;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #555;
}

input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 0.75rem;
  background-color: #6a11cb;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #2575fc;
}

.auth-link {
  margin-top: 1rem;
  color: #555;
}

.auth-link a {
  color: #6a11cb;
  text-decoration: none;
}

.auth-link a:hover {
  text-decoration: underline;
}

.error-message {
  color: red;
  margin-top: 1rem;
}
</style>